<template>
  <div class="box">
    <div class="main">
      <div class="mb20">
        <img src="@/assets/images/correction.png" alt="" />
      </div>
      <div style="min-height: 600px">
        <div class="f fw">
          <div
            v-for="item in exerciseList"
            class="course-item pointer"
            @click="goPath(item.id)"
          >
            <img :src="item.courseCover" alt="" width="272" height="152" />
            <div class="f14 pl10 pr10 pt13 pb10">
              <div class="mb10">{{ item.courseName }}</div>
              <div class="course-content tem2" style="height: 48px">
                {{ item.courseDesc }}
              </div>
              <div class="course-content mt10 mb15">
                课时 · {{ item.totalHours }}课时
              </div>
              <div class="f jcsb aic mb10">
                <div class="correction">错 {{ item.questionNumber }} 道题</div>
                <el-tag type="danger" color="#F01414" effect="dark">
                  开始练习
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="f column aie">
        <el-pagination
          @size-change="queryParams.pageSize"
          @current-change="queryParams.pageNum"
          layout="total, prev, pager, next, jumper"
          :page-size="8"
          hide-on-single-page
          :total="total"
        >
        </el-pagination>
        <!-- :hide-on-single-page="value" -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { errCourseExercise } from "@/api/course";

const router = useRouter();
const userId = JSON.parse(localStorage.getItem("userInfo")).userId;
const total = ref(0);
const exerciseList = ref([]);
const queryParams = ref({
  pageSize: 8,
  pageNum: 1,
  isStatus: 1,
  courseSubject: undefined,
  courseType: undefined,
});

const getList = () => {
  errCourseExercise(userId).then((res) => {
    exerciseList.value = res.rows;
  });
};

const goPath = (id) => {
  router.push({
    path: "/exercise",
    query: { id: id, type: "wrong" },
  });
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.box {
  background: #fff;
}
.main {
  width: 1154px;
  margin: 0 auto;
  padding: 100px 0 20px;
  // 内容
  .course-item {
    width: 272px;
    // height: 282px;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    color: #6e747a;
    margin-right: 22px;
    margin-bottom: 22px;
    box-shadow: 0 0 10px 3px #e8e8e8;
    &:nth-child(4n) {
      margin-right: 0;
    }
    .course-content {
      line-height: 24px;
      opacity: 0.7;
    }
    .correction {
      color: #f01414;
    }
    &:hover {
      box-shadow: 0 0 5px 2px rgba(208, 208, 208, 0.7);
    }
  }
}
</style>
